import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.less']
})
export class IndexComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  like = [
    {
      title:"爱国主义教育基地",
      image:"https://bootcdn.xuexi.cn/18600410326/af4f7df0844acecb50f8fef7f70d0e4b.png",
      link:"patriotic",
      active:true
    },
    {
      title:"红色旅游精品线路",
      image:"https://bootcdn.xuexi.cn/18600410326/e921e6c2e05883fa7baf966877f147d3.jpg",
      link:"travel",
      active:true
    },
  ];

  other = [
    {
      title:"长征纪念馆纪念地",
      image:"https://bootcdn.xuexi.cn/18600410326/6f91ee6c5d9baedf7f0177976e60ed0a.png",
      link:"",
      active:false
    },
    {
      title:"解放战争纪念馆地",
      image:"https://bootcdn.xuexi.cn/18600410326/36654593268b7fbd317af41759a7ab3c.jpg",
      link:"",
      active:false
    },
    {
      title:"红色旅游经典景区",
      image:"https://bootcdn.xuexi.cn/18600410326/cd4b19a535444173aa82a41209eefc40.jpg",
      link:"",
      active:false
    },
    {
      title:"抗战纪念馆纪念地",
      image:"https://bootcdn.xuexi.cn/18600410326/a96fe7d0dba77f844620fb100076f493.png",
      link:"",
      active:false
    },
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}
